<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" 
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>餐饮网站-俞健澄</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <style type="text/css">
    	body{
    		font-family: "microsoft yahei";
    	}
    	.head-top{
    		background: #5fa022;/*rgb*/
    		padding: 0.8em 0;
    	}
    	.navbar-brand{
    		padding: 0 0;
    	}
    	.navbar-brand>img{
    		height: auto;
    		margin-right: 5px;
    		margin-top: 5px;
    		width: 250px;
    	}
    	.navbar-default{
    		padding: 1.5em 0;
    		background-color: #2f0f1;
    		box-shadow: 12px 5px 39px -12px;
    	}
    	.navbar-default .navbar-nav>li a{
    		top: 10px;
    		padding: 0.5em 3em;
    		text-decoration:none;
    		font-weight:600 ;
    		font-size: 1.2em;
    		color: #919191;
    	}
    	.navbar-default .navbar-nav> li >a:hover,.navbar-default .navbar-nav> li >a:focus {
          background:#D96B66;
          color: white;
          border-radius: 3px;
          }

        .navbar-right>a{
         color:#D96B66;
        }
       @media (max-width: 970px) {
    .navbar-default .navbar-nav>li a {
        font-size: 1.1em;
    }
}
    </style>
	</head>
	<body>
		<!--导航栏-->
		<header>
			<!--装饰条-->
			<div class="head-top"></div>
			<!--导航栏-->
			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<div class="container">
						<!--导航栏头部、logo、汉堡按钮-->
					  <div class="navbar-header">
					  	<!--logo-->
					  	<a href="#" class="navbar-brand"><img src="images/logo.png" alt=""></a>
					  	<!--汉堡按钮-->
					    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
					  		<span class="sr-only"></span>
					  		<span class="icon-bar"></span>
					  		<span class="icon-bar"></span>
					  		<span class="icon-bar"></span>
					  	</button>
					  </div>
					  <!--  导航栏菜单、购物车-->
					  <div class="collapse navbar-collapse" id="navbar-collapse" aria-expanded="false">
					  	<!--导航栏菜单-->
					  	<!--ul>(li>a)*5-->
					  	<ul class="nav navbar-nav">
                         <li><a href="#">主页</a></li>
                         <li><a href="#">餐厅</a></li>
                         <li><a href="#">健康</a></li>
                         <li><a href="#">话题</a></li>
                         <li><a href="#">联系我们</a></li>
                        </ul>
                        <div class="navbar-right ">
                    <a href="#">
                        <h3> <span >￥0.00 <img src="images/bag.png" alt=""/></span></h3>
                    </a>
                        </div>
					  </div>
				    </div>
				</div>
			</nav>
		</header>
		
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
	</body>
</html>
